<template>
  <div class="address_box">
    <div class="address_list" >
      <div class="list_left">
        <img src="/static/image/buylist_location.png" alt>
      </div>

      <div class="list_right">
        <div class="list_name">{{order_address_info.name}} &nbsp;&nbsp;{{order_address_info.mobile}}</div>
        <div class="address_bar">
          <span>收货地址：</span>
          {{order_address_info.province}}{{order_address_info.city}}{{order_address_info.district}}{{order_address_info.address}}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["order_address_info"],
  data() {
    return {
    };
  },
  components: {}
};
</script>

<style scoped lang='less'>
.address_box {
  width: 100%;
  padding-bottom: 0.2rem;
  background: #efefef;
  border-bottom: 0px solid #efefef;
  transition: 0.4s;
  &:active {
    background: @bg_color;
  }
  &:last-child {
    border-bottom: 0;
  }
  .address_list {
    background: #fff;
    .flex-box(flex-start, center, 0.4rem);
    .address_bar {
      .text(2);
      box-sizing: content-box;
      font-size: .8rem
    }
    .list_name {
      font-size: 1rem;
      margin-bottom: 0.2rem;
      .text(1);
    }
    * {
      box-sizing: content-box;
    }
  }
  .list_left {
    .flex-box(center, center, 0.1rem);
    width: 10vw;
    img {
      width: 1rem;
      height: auto;
    }
  }
  .list_right {
    .flex-box(flex-start, center, 0);
    padding-left: 0.5rem;
    position: relative;
    width: calc(100% - 7vw);
    align-items: flex-start;
    flex-direction: column;
    .address_bar {
      color: @color;
      font-size: 0.8rem;
    }
  }
}

.title {
  font-size: 1rem;
  .flex-box(start, center, 0.2rem);
  img {
    height: 1rem;
    width: 1rem;
    margin-left: 0.3rem;
  }
  .center {
    padding: 0 0.44rem;
  }
}
</style>